<template>
  <div>
    <header>
      <div id="head">
        <img id="portrait" src="./assets/images/jump.jpg" alt="jump-girl" />
        <h1>你好，终于等到你！</h1>
        <p>热爱编程，享受生活，分享一切美好事物</p>
      </div>
    </header>
    <!-- 导航栏 -->
    <nav>
      <ul>
        <li>
          <a href="#"><router-link to="/">首页</router-link></a>
        </li>
        <li>
          <a href="#"><router-link to="/vlog">日志</router-link></a>
        </li>
        <!-- <li>
          <a href="#"><router-link to="/album">相册</router-link></a>
        </li> -->
        <li>
          <a href="#"><router-link to="/chatgpt">ChatGPT</router-link></a>
        </li>
        <li>
          <a href="#"><router-link to="/about">关于我</router-link></a>
        </li>
      </ul>
    </nav>
    <router-view></router-view>
    <!-- 页脚 -->
    <footer id="footer" class="footer">
      <div id="footer_bottom">
        <div class="poweredby">Powered by Vue 2.5.2 on Nodejs, Design by 张翠山</div>
        <div class="about">
          <a href="#"><router-link to="/about">关于博客</router-link></a>
          <a href="mailto:290794272@qq.com">联系作者</a>
          <span>©2023-2023</span><a href="/">ZHANG-CUISHAN.COM</a>
          <span>保留所有权利</span>
          <a href="https://beian.miit.gov.cn/" target="_blank">京ICP备2022006337号</a>
        </div>
        <div class="report-contact">
          作者微信：zhang-cuishan，作者邮箱：290794272@qq.com
        </div>
      </div>
    </footer>
  </div>
</template>

<script>
import "@/assets/css/index.css";

export default {
  name: "App",
};
</script>

<style>
html,
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-tap-highlight-color: transparent;
}
</style>